<template>
  <l-icon
    :name="name"
    :color="color"
    :size="size"
    :prefix="prefix"
    :inherit="inherit"
    :web="web"
    @click="handleClick"
  />
</template>

<script>
/**
 * my-icon 组件
 * 
 * 这是一个对l-icon组件的封装，提供方便快捷的图标显示功能
 * 
 * @component my-icon
 * @example
 * 
 * 基础用法:
 * <my-icon name="close" />
 * 
 * 设置颜色和大小:
 * <my-icon name="plus" color="#007AFF" size="40rpx" />
 * 
 * 使用前缀:
 * <my-icon name="account-box-fill" prefix="ri" />
 * 
 * 监听点击事件:
 * <my-icon name="settings" @click="handleIconClick" />
 */
export default {
  name: 'my-icon',
  props: {
    /**
     * 图标名称
     * 
     * 使用方式:
     * 1. 默认图标: 直接使用名称，如 "close", "circle" (默认使用tdesign图标集，无需前缀)
     * 2. Iconify图标: 可以使用完整路径，如 "ri:account-box-fill"
     *    或配合prefix属性，如 name="account-box-fill" prefix="ri"
     * 
     * 提示: 可以在 icones.netlify.app 网站搜索超过150,000个开源矢量图标
     */
    name: {
      type: String,
      default: ''
    },
    /**
     * 图标颜色
     * 
     * 支持CSS颜色值，如 "#ff0000", "red", "rgba(255,0,0,0.5)" 等
     */
    color: {
      type: String,
      default: ''
    },
    /**
     * 图标尺寸
     * 
     * 可以使用数字值加单位，如 "40rpx", "24px" 等
     * 默认值为 "square"，表示正方形
     */
    size: {
      type: String,
      default: 'square'
    },
    /**
     * 字体图标前缀
     * 
     * 当使用Iconify图标时，可以通过此属性指定前缀，如:
     * - "ri" (Remix Icon)
     * - "mdi" (Material Design Icons)
     * - "fa" (Font Awesome)
     * - 更多前缀请参考 icones.netlify.app
     */
    prefix: {
      type: String,
      default: ''
    },
    /**
     * 是否继承父元素颜色
     * 
     * 设置为true时，图标会继承父元素的颜色
     */
    inherit: {
      type: Boolean,
      default: true
    },
    /**
     * 原生app(nvue,uvue)是否使用web渲染
     * 
     * 在原生应用中使用时可能需要设置此属性
     */
    web: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    /**
     * 处理点击事件
     * 
     * @param {Event} event - 点击事件对象
     * @emits click - 当图标被点击时触发
     */
    handleClick(event) {
      this.$emit('click', event);
    }
  }
}
</script>

<!-- 
my-icon 组件使用指南

这是一个对l-icon组件的封装，用于显示各种图标

基本用法:
------------------------

1. 使用默认图标集(tdesign)：
   <my-icon name="circle" />
   <my-icon name="close" />
   
   默认内置了tdesign图标集，不需要添加前缀

2. 使用Iconify图标集：
   <my-icon name="ri:account-box-fill" />
   
   或者分开指定:
   <my-icon name="account-box-fill" prefix="ri" />

3. 设置样式:
   <my-icon name="close" color="red" size="40rpx" />

4. 监听点击:
   <my-icon name="settings" @click="handleIconClick" />

查找图标:
------------------------
可以在 icones.netlify.app 网站搜索超过150,000个开源矢量图标
--> 